<template>
	<div>
		<ProTable ref="proTable" title="系统通知" :columns="columns" :requestApi="getTableList" :init-param="initParam">
			<!-- 表格 功能 按钮 -->
			<template #otherButton>
				<el-button @click="onReadAll" type="primary" v-auth="'system:notification:mark-read:invoke'" plain> 全部设为已读 </el-button>
			</template>
			<!-- Expand -->
			<template #expand="scope">
				{{ scope.row }}
			</template>
			<template #operation="{ row }">
				<el-button type="primary" link v-auth="'system:notification:view:invoke'" @click="onView(row)"> 查看 </el-button>
				<el-divider direction="vertical" v-if="row.notificationStatus == 0" v-auth="'system:notification:mark-read:invoke'" />
				<el-button type="primary" link v-if="row.notificationStatus == 0" v-auth="'system:notification:mark-read:invoke'" @click="onRead(row.id)">
					设为已读
				</el-button>
			</template>
		</ProTable>
	</div>
</template>

<script setup lang="tsx" name="systemOperation">
import { ref, reactive } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import ProTable from '../../../../components/ProTable/index.vue';
import { ProTableInstance, ColumnProps } from '../../../../components/ProTable/interface';
import { fetchNoticeList, fetchNoticeRead, fetchNoticeReadAll } from '/@/api/system';

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

const router = useRouter();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getTableList"
const getTableList = (params: any) => {
	return fetchNoticeList(params);
};

// 表格配置项
const columns: ColumnProps<any>[] = [
	{
		prop: 'createTime',
		label: '时间',
		minWidth: 180,
	},
	{
		prop: 'notificationType',
		label: '通知类型',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '选择通知类型', clearable: true, filterable: true } },
		enum: [
			{
				label: '退款售后',
				value: 1,
			},
			{
				label: '异常订单',
				value: 2,
			},
		],
	},
	{
		prop: 'content',
		label: '通知内容',
		minWidth: 400,
		render: (scope: any) => {
			return (
				<div>
					{scope.row.content}
					订单编号：
					<el-link type="primary" underline={false} class="color-primary" onClick={() => router.push(`/order/query/detail/${scope.row.orderId}`)}>
						{scope.row.orderNo}
					</el-link>
				</div>
			);
		},
	},
	{
		prop: 'notificationStatus',
		label: '通知状态',
		minWidth: 120,
		search: { el: 'select', props: { placeholder: '选择通知状态', clearable: true, filterable: true } },
		enum: [
			{
				label: '已读',
				value: 1,
				color: 'green',
			},
			{
				label: '未读',
				value: 0,
				color: 'red',
			},
		],
	},
	{ prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'left' },
];

const onView = async (row: any) => {
	router.push({
		path: `/order/query/detail/${row.orderId}`,
	});
	const res = await fetchNoticeRead({ id: row.id });
};

const onRead = (id: any) => {
	ElMessageBox.confirm('确认设为已读？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await fetchNoticeRead({ id });
		if (res.code == 200) {
			proTable.value?.getTableList();
			ElMessage.success('设为已读成功');
		}
	});
};

const onReadAll = () => {
	ElMessageBox.confirm('确认全部设为已读？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		const res = await fetchNoticeReadAll({});
		if (res.code == 200) {
			proTable.value?.getTableList();
			ElMessage.success('全部设为已读成功');
		}
	});
};
</script>

<style lang="scss"></style>
